<template>
	<view class="team" v-if="today_data">
		<view class="bgBox">
			<view class="data flex_space_a">
				<view class="item">
					<view class="label">直推</view>
					<view class="number mTop1">{{ref_user_count}}</view>
				</view>
				<view class="line"></view>
				<view class="item">
					<view class="label">扩散</view>
					<view class="number mTop1">{{team_user_count}}</view>
				</view>
			</view>
			
			<view class="card">
				<view class="tabs">
					<view class="item" :class="current == 0 ? 'active' : ''" @click="tabChange(0)">今日新增</view>
					<view class="item" :class="current == 1 ? 'active' : ''" @click="tabChange(1)">昨日新增</view>
					<view class="item" :class="current == 2 ? 'active' : ''" @click="tabChange(2)">本月新增</view>
				</view>
				
				<view class="info flex_space_b mTop3">
					<view class="item">
						<view class="label">直推</view>
						<view class="number mTop1">{{show_data.ref_user_count}}</view>
					</view>
					<view class="item">
						<view class="label">扩散</view>
						<view class="number mTop1">{{show_data.team_user_count}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="buddy">
				<view class="title">直推好友<text>{{ref_user_count}}</text>人</view>
				<view class="item flex_space_b" v-for="(item, index) in ref_user_list" :key="index">
					<image class="avatar" :src="item.user_headimg" mode="aspectFill"></image>
					<view class="info flex_space_b">
						<view class="top">
							<view class="uname">{{item.user_nickname}}</view>
							<view class="time mTop1">{{item.register_time}}</view>
						</view>
						<view class="bottom">
							<view class="income redText">收益:￥<text>{{item.total_income}}</text></view>
						</view>
					</view>
				</view>
				
				<view class="noContent" v-if="ref_user_list.length == 0">
				  <image class="noContentImage" mode="widthFix" src="/static/noLive.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				p:1,
				is_loading:false,
				is_more:true,
				ref_user_list:[],
				ref_user_count:0,
				team_user_count:0,
				today_data:null,
				yes_data:{},
				this_month_data:{},
				show_data:{},
				current: 0
			}
		},
		onLoad(options) {
			this.loadData();
		},
		onReachBottom() {
			if(!this.is_loading){
			  if(!this.is_more){
				util.toast("没有更多数据了");
				return false;
			  }
			  this.p = parseInt(this.p) + 1;
			  this.moreData();
			}
		},
		methods: {
			loadData: function(){
				// 加载数据
				var that = this;
				this.is_loading = true;
				util.requestPost("api.php/user/teamUserList", {}, function(res) {
					let is_more = false;
					if(res.data.ref_user_list.length >=15){
					  is_more = true;
					}
					that.ref_user_list = res.data.ref_user_list;
					that.ref_user_count = res.data.ref_user_count;
					that.team_user_count = res.data.team_user_count;
					that.today_data = res.data.today_data;
					that.yes_data = res.data.yes_data;
					that.this_month_data = res.data.this_month_data;
					that.show_data = res.data.today_data;
					that.is_loading = false;
					that.is_more = is_more;
				},true);
			},
			moreData: function(){
				// 加载数据
				var that = this;
				let data = {
					'p':this.p
				};
				this.is_loading = true;
				util.requestPost("api.php/user/moreRefUserList", data, function(res) {
					let is_more = false;
					if(res.data.ref_user_list.length >=15){
					  is_more = true;
					}
					if(that.p == 1){
						that.ref_user_list = res.data.ref_user_list;
					}else{
						that.ref_user_list = that.ref_user_list.concat(res.data.ref_user_list);
					}
					that.is_loading = false;
					that.is_more = is_more;
				});
			},
			tabChange (index) {
				this.current = index;
				if(index == 0){
					this.show_data = this.today_data;
				}else if(index == 1){
					this.show_data = this.yes_data;
				}else if(index == 2){
					this.show_data = this.this_month_data;
				}
			}
		}
	}
</script>

<style scoped>
.team {
	min-height: 100%;
	background-color: var(--bgColor);
}
.bgBox {
	background-color: var(--primaryColor);
	padding: 60rpx 0 300rpx;
	border-radius: 0 0 100% 100%;
	position: relative;
}
.bgBox .data {
	color: #FFFFFF;
}
.bgBox .data .line {
	width: 1rpx;
	height: 48rpx;
	background-color: #FFFFFF;
}
.bgBox .data .item {
	flex: 1;
	text-align: center;
	font-size: 24rpx;
}
.bgBox .data .item .number {
	font-size: 36rpx;
}
.bgBox .card {
	background-color: #FFFFFF;
	padding: 30rpx;
	position: absolute;
	top: 180rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 690rpx;
	border-radius: 12rpx;
	box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
}
.bgBox .card .tabs {
	border: 1rpx solid var(--primaryColor);
	display: inline-block;
	border-radius: 12rpx;
}
.bgBox .card .tabs .item {
	display: inline-block;
	padding: 4rpx 16rpx;
	font-size: 24rpx;
}
.bgBox .card .tabs .item:nth-of-type(2) {
	border-left: 1rpx solid var(--primaryColor);
	border-right: 1rpx solid var(--primaryColor);
}
.bgBox .card .tabs .item.active {
	color: #FFFFFF;
	background-color: var(--primaryColor);
}
.bgBox .card .info .item {
	flex: 1;
	background-color: #EEEEEE;
	padding: 30rpx 20rpx;
	border-radius: 12rpx;
}
.bgBox .card .info .item:first-of-type {
	margin-right: 10rpx;
}
.bgBox .card .info .item:last-of-type {
	margin-left: 10rpx;
}
.bgBox .card .info .item .label {
	font-size: 24rpx;
	color: #666;
}
.bgBox .card .info .item .number {
	font-size: 36rpx;
}
.content {
	padding: 30rpx;
}
.buddy {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 0 20rpx 20rpx;
}
.buddy .title {
	font-weight: 600;
	padding: 20rpx 0;
}
.buddy .title text {
	color: var(--primaryColor);
}
.buddy .item {
	background-color: #EEEEEE;
	border-radius: 12rpx;
	padding: 30rpx 20rpx;
	margin-bottom: 20rpx;
}
.buddy .item:last-of-type {
	margin-bottom: 0;
}
.buddy .item .avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 60rpx;
}
.buddy .item .info {
	flex: 1;
	margin-left: 20rpx;
	font-size: 24rpx;
}
.buddy .item .info .uname {
	font-size: 28rpx;
}
.buddy .item .info .time {
	color: #999999;
}
.buddy .item .info .income text {
	font-size: 28rpx;
}

.buddy .not {
	text-align: center;
	padding: 20rpx 0;
	font-size: 32rpx;
}

.noContent {
	width: 100%;
	padding-top: 60px;
	padding-bottom: 60px;
}
</style>
